<template>
  <div id="app"
  v-loading.fullscreen="loading"
  element-loading-text="干活中.."
  >
  <h1>后台数据管理</h1>

 <!-- <el-button @click="refreshData">刷新</el-button> -->

    <h2>上传新数据</h2>
    <el-upload
    ref="uploadStudent"
    action="/api/upfile/updata"
    :auto-upload="false"
    :on-error="errorUpload"
    :on-progress="startUpload"
    :on-success="successUpload"
    :data="getUploadType"
    :show-file-list="true"
    :limit="1"
    >
    <!-- 上传的数据类型 -->
    <el-select v-model="uploadType" placeholder="数据类型">
      <el-option
      v-for="item in uploadTypes"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      >
      </el-option>
    </el-select>

    <el-button slot="trigger">选择数据文件</el-button>
    <el-button @click="uploadStudent">上传数据</el-button>
    </el-upload>
    <h2>数据列表</h2>
    
    <el-row :gutter=40>
          <el-col :span="10">
        <el-card>
      <div slot="header">
        <span>成绩数据</span>
        <el-button style="float: right;" type="text" @click='preview("studentData")'  >预览</el-button>
      </div>
      <!-- 年份，学生数量 -->
    <el-table
    :data="studentData"
    >
      <el-table-column
      prop="year"
      label="年级"
      >  
      </el-table-column>

      <el-table-column
      prop="count"
      label="记录数"
      >
      </el-table-column>
      <el-table-column
      label="操作"
      >
       <template slot-scope="scope">
        <el-button @click="deleteStudents(scope.row)">删除记录</el-button>
      </template>
      </el-table-column>
    </el-table>
    </el-card>
        </el-col>  

      <el-col :span="4">
        <el-card>
      <div slot="header">
        <span>图书借阅数据记录数</span>
        <el-button style="float: right;" type="text" @click='preview("bookData")' >预览</el-button>
        <el-button style="float: right;" type="text" @click='deleteData("bookData")'>删除</el-button>
      </div>
      <h1 id="bookData">{{bookData }}</h1>
    </el-card>
        </el-col>  


   <el-col :span="4">
        <el-card>
      <div slot="header">
        <span>成绩数据记录数</span>
        <el-button style="float: right;" type="text" @click='preview("achievementData")' >预览</el-button>
        <el-button style="float: right;" type="text" @click='deleteData("achievementData")'>删除</el-button>
      </div>
      <h1 id="achievementData">{{ achievementData }}</h1>
    </el-card>
        </el-col>  
   <el-col :span="4">
        <el-card>
      <div slot="header">
        <span>性格数据记录数</span>
        <el-button style="float: right;" type="text" @click='deleteData("characterData")'>删除</el-button>
        <el-button style="float: right;" type="text" @click='preview("characterData")'>预览</el-button>
          
      </div>
      <h1 id="characterData">{{ characterData }}</h1>
    </el-card>
        </el-col>  
    </el-row>
  
  <!-- 数据预览 -->
  <el-drawer title="数据预览"
  :visible.sync="previewdrawer"
  direction="ttb"
  size
  >
 
  <el-row type="flex" justify="center">
    <el-col >
       <el-table
  height="250"
  :data="preview_data"
  >
      <el-table-column
    v-for="column in preview_columns"
    :key="column"
    :label="column"
    :prop="column"
    >
    </el-table-column>
      </el-table>
    </el-col>
    
  </el-row>
    


  </el-drawer>
  </div>
</template>

<script>

import {get,post} from "./api/http.js"
import { Loading } from 'element-ui';

export default {
  name: 'app',
  mounted(){
    this.refreshData()
  },
  components: {
  
  },
  computed:{

    // 获取上传的附加数据
    getUploadType()
    {
      return {
        uploadType:this.uploadType
        };
    }

  }
  ,
  // 方法
  methods:{

    // 根据数据类型 预览数据
    preview(uploadType){
        this.previewdrawer=true;
        this.nowPreviewType=uploadType;
        console.log("预览数据:"+uploadType)
        post("api/upfile/preview",{uploadType:uploadType}).then((data)=>{
          console.log("预览数据:")
          console.log(data)

      this.preview_columns.splice(0,this.preview_columns.length);
      data.preview_columns.forEach( (value,index)=>{
        this.preview_columns.push(value);
      })
      this.preview_data.splice(0,this.preview_data.length);
      data.preview_data.forEach( (value,index)=>{
        this.preview_data.push(value);
      })


        })

    },
    // 通用开始上传加载
    startUpload(){
      this.loading=true
    },
    successUpload(res){
    console.log("上传成功")
    console.log(res)
    this.loading=false
     if(res.code==0)
     {
this.$alert("上传解析完成","上传结果")
     }  
     else
     {
       this.$alert("失败!!"+res.msg,"上传结果")
     }
     // 上传成功后
     this.refreshData()
       this.$refs.uploadStudent.clearFiles()

      

    },
    endUpload(){
  
    },
    errorUpload(msg){
      console.log("上传错误!")
      console.log(msg)
      this.loading=false
      this.$alert(msg,"上传数据错误，哈哈哈")
       this.$refs.uploadStudent.clearFiles()
    },

    // 获取学生的记录
    refreshData(){
      // 使用箭头函数，this对象还是vue实例
      get("/api/upfile/infos").then((data)=>{
        console.log("刷新数据成功")
        console.log(data)
      
      this.bookData=data.bookData;
  
      this.characterData=data.characterData;
      this.achievementData=data.achievementData;
      this.studentData.splice(0,this.studentData.length);
      data.studentData.forEach( (value,index)=>{
        this.studentData.push(value);
      })
    
      }).catch(function(){

      })
    console.log("刷新数据:")
    
 

    },
    // 删除数据
    deleteData(uploadType){
      this.loading=true;
        post("/api/upfile/delete",{
        uploadType:uploadType,
      }).then(()=>{
        this.loading=false;
        this.$alert("删除成功","结果")
        this.refreshData()
      }).catch(function(reason){
        this.loading=false;
        console.log(reason)
        this.$alert("删除失败:"+reason,"结果")
      })
    },
    deleteStudents(row){
       this.loading=true;
      console.log(row)
      post("/api/upfile/delete",{
        uploadType:"studentData",
        year:row.year
      }).then(()=>{
         this.loading=false;
        console.log("删除成功!")
        this.refreshData()
      }).catch(function(reason){
         this.loading=false;
        console.log(reason)
        console.log("删除失败")
      })
    },

    // 上传学生数据
    uploadStudent(){
      
      this.$refs.uploadStudent.submit()

    }

  },
  data(){

    return {
      // 当前预览的类型
      nowPreviewType:"studentData",
      previewdrawer:false,
      bookData:0,
      characterData:0,
      achievementData:0,
      uploadType:"studentData",
      loading:false,
    // 学生记录
    studentData:[
      {year:"2019",count:"44"},
      {year:"2018",count:"44"}
    ],
    uploadTypes:[
      {
        value:"studentData",
        label:"学生报道数据"
      },
      {
        value:"bookData",
        label:"图书借阅数据"
      },
      {
        value:"characterData",
        label:"性格测试数据"
      },
      {
        value:"achievementData",
        label:"成绩数据"
      }
    ],
    // 预览的数据
    // 预览返回的列头
    preview_columns:["姓名","年龄"],
    // 对应的数据
    preview_data:[
       {
      姓名:"tet",年龄:100
    },
      {
      姓名:"liang",年龄:21
    },{
      姓名:"mindy",年龄:20
    },{
      姓名:"kkk",年龄:20
    },
    {
      姓名:"tomcat",年龄:20
    }
   
    ],


    }
  
  }

}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: center; */
  color: #2c3e50;
  margin-top: 60px;
}
</style>
